<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">

</head>
<body>
    <div id="app">

        <el-button @click="addUI" type="primary">新增</el-button>
        <!--
            :data： 绑定表格对应的数据
            stripe; 是否斑马纹显示
        -->
        <el-table :data="tableData" stripe style="width: 100%">
            <!--
             type="index" ：类型为行的索引
             label： 表头

            注意：索引不是集合中的id
            -->
            <el-table-column
                    type="index"
                    label="序号"
                    width="180" align="center">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="商品名称"
                    width="180" align="center">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格" align="center">
            </el-table-column>
            <el-table-column
                    prop="stock"
                    label="库存" align="center">
            </el-table-column>
            <el-table-column
                    prop="type.name"
                    label="分类" align="center">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="描述" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <!--
                    slot-scope：作用域插槽，可以获取表格数据
                    scope：代表表格数据(tableData)
                    可以通过scope.row来获取表格当前行数据，scope不是固定写法
                    @click：绑定vue中的方法
                -->
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--
            分页组件
              @size-change： 当改变每页条数时触发的钩子函数
              @current-change：当改变页码时触发的钩子函数
              current-page ：默认的页码
              :page-sizes：每页条数选择框中显示的值
              :page-size : 默认的每页条数
              layout： 分页组件的布局
                  total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
              :total: 总条数
        -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                current-page="1"
                :page-sizes="[1,3, 5, 8, 10]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>

        <!--添加商品的弹窗-->
        <!--@close : 关闭窗口时回调-->
        <el-dialog title="添加商品" :visible.sync="dialogTableVisible" @close="resetForm('addForm')">
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref： 在获取表单对象时使用
            -->
            <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="name">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price" style="text-align: left;">
                    <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                    <el-input  v-model="formData.price"></el-input>
                </el-form-item>
                <el-form-item label="库存" prop="stock">
                    <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                    <el-input v-model.number="formData.stock" precision="2"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="type_id">
                    <el-select v-model="formData.type_id" placeholder="请选择商品类型">
                        <el-option v-for="t in types" :label="t.name" :value="t.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="formData.description"></el-input>
                </el-form-item>
                <el-form-item align="right">
                    <el-button type="primary" @click="add('addForm')">添加</el-button>
                    <el-button @click="resetForm('addForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--修改商品的弹窗-->
        <!--@close : 关闭窗口时回调-->
        <el-dialog title="修改商品" :visible.sync="dialogTableVisible4Edit" @close="resetForm('editForm')">
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref： 在获取表单对象时使用
            -->
            <el-form :model="formData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="name">
                    <!--v-model : 双向绑定 -->
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price" style="text-align: left;">
                    <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                    <el-input  v-model="formData.price"></el-input>
                </el-form-item>
                <el-form-item label="库存" prop="stock">
                    <!--如果数据要求是数字， v-model 后面必须跟 .number-->
                    <el-input v-model.number="formData.stock" precision="2"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="type_id">
                    <el-select v-model="formData.type_id"  @change="$forceUpdate()" placeholder="请选择商品类型">
                        <el-option v-for="t in types" :label="t.name" :value="t.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="formData.description"></el-input>
                </el-form-item>
                <el-form-item align="right">
                    <el-button type="primary" @click="edit('addForm')">修改</el-button>
                    <el-button @click="resetForm('editForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</body>
<style type="text/css">
    /* 设置分页组件在右侧显示 */
    .el-pagination{
        text-align: right;
        padding: 15px;
    }
</style>
<script src="vue/vue-v2.6.10.js"></script>
<script src="element-ui-2.13.0/lib/index.js"></script>
<script src="vue/axios-0.18.0.js"></script>
<script type="text/javascript">
    //自定义价格的校验规则
    var checkPrice = (rule, value, callback) => {
        //正则表达式： 必须是正整数或者是正浮点数
        var pattern = /^\d+(\.\d+)?$/;
        if (!pattern.test(value)) {
            callback(new Error('请输入整数或者小数！！'));
        } else {
            callback();
        }
    };
    new Vue({
        el: "#app",
        data:{
            tableData:[] ,// 表格中要展示的数据集合
            pagination:{ //分页参数
                currentPage: 1,
                pageSize:10,
                total: 0
            },
            formData:{
				type:{id:null}
			}, //对应新增和编辑的表单数据
            dialogTableVisible:false , //新增窗口的显示与隐藏
            dialogTableVisible4Edit:false, //编辑窗口的显示与隐藏
            types: [], // 商品分类列表数据（在下拉菜单中显示）
            rules: { //校验规则
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },
                    { validator: checkPrice, trigger: 'blur' }
                ],
                stock: [
                    { required: true, message: '请输入库存数量', trigger: 'blur' },
                    { type: 'number', message: '库存数量只能是数字', trigger: 'blur' }
                ],
                type_id: [
                    { required: true, message: '请选择商品分类', trigger: 'change' }
                ]
            }
        },
        //钩子函数，在创建vue对象完成后执行
        created(){
            //创建vue后，分页查询数据
            this.findByPage();
        },
        methods: {
            //分页查询
            findByPage(){

            },
            //改变每页条数时执行的钩子
            handleSizeChange(pageSize){

            },
            //改变页码时执行的钩子
            handleCurrentChange(currentPage){

            },
            //重置表单
            resetForm(formName){

            },
            /**
             * 添加
             *
             * @param formName
             */
            add(){

            },
            /**
             * 新增回显
             *
             */
            addUI(){

            },
            /**
             * 编辑商品回显
             *
             */
            handleUpdate(row){

            },

            /**
             * 修改
             *
             */
            edit(){

            },
            /**
             * 根据id删除商品
             *
             */
            handleDelete(row){

            }

        }

    });
</script>
</html>